<template>
	<div class="product-in">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addEntry">新增入库单</el-button>
				<el-input v-model="searchName" placeholder="搜索入库单名称" style="width: 200px; margin-left: 10px"
					clearable />
				<el-date-picker v-model="searchDate" placeholder="筛选入库日期" style="margin-left: 10px"
					value-format="YYYY-MM-DD" clearable />
			</div>

			<el-table :data="filteredEntries" style="width: 100%; margin-top: 20px" border stripe>
				<el-table-column prop="entryId" label="入库单号" sortable></el-table-column>
				<el-table-column prop="entryName" label="入库单名称" sortable></el-table-column>
				<el-table-column prop="workOrder" label="生产工单编号" sortable></el-table-column>
				<el-table-column prop="entryDate" label="入库日期" sortable></el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column fixed="right" label="操作" width="180">
					<template #default="scope">
						<el-button size="small" type="primary" @click="editEntry(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteEntry(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="入库单信息" width="500px">
			<el-form :model="currentEntry" label-width="120px">
				<el-form-item label="入库单号">
					<el-input v-model="currentEntry.entryId" />
				</el-form-item>
				<el-form-item label="入库单名称">
					<el-input v-model="currentEntry.entryName" />
				</el-form-item>
				<el-form-item label="生产工单编号">
					<el-input v-model="currentEntry.workOrder" />
				</el-form-item>
				<el-form-item label="入库日期">
					<el-date-picker v-model="currentEntry.entryDate" type="date" placeholder="选择日期"
						value-format="YYYY-MM-DD" />
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="currentEntry.remark" type="textarea" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveEntry">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const entries = ref([
	{ entryId: 'IN202405001', entryName: '入库单-阿莫西林', workOrder: 'WO1001', entryDate: '2024-06-01', remark: '首批入库' },
	{ entryId: 'IN202405002', entryName: '入库单-布洛芬', workOrder: 'WO1002', entryDate: '2024-06-05', remark: '' },
	{ entryId: 'IN202405003', entryName: '入库单-维生素C', workOrder: 'WO1003', entryDate: '2024-06-08', remark: '' },
])

// 补充 12 条模拟数据
for (let i = 4; i <= 15; i++) {
	entries.value.push({
		entryId: `IN2024050${i}`,
		entryName: `入库单-产品${i}`,
		workOrder: `WO100${i}`,
		entryDate: `2024-06-${10 + i}`,
		remark: ''
	})
}

const searchName = ref('')
const searchDate = ref('')
const dialogVisible = ref(false)
const currentEntry = ref({})

// 筛选
const filteredEntries = computed(() => {
	return entries.value.filter(e =>
		(!searchName.value || e.entryName.includes(searchName.value)) &&
		(!searchDate.value || e.entryDate === searchDate.value)
	)
})

// 新增入库单
const addEntry = () => {
	currentEntry.value = { entryId: '', entryName: '', workOrder: '', entryDate: '', remark: '' }
	dialogVisible.value = true
}

// 编辑入库单
const editEntry = (row) => {
	currentEntry.value = { ...row }
	dialogVisible.value = true
}

// 保存入库单
const saveEntry = () => {
	if (!currentEntry.value.entryId || !currentEntry.value.entryName) {
		ElMessage.error('入库单号和入库单名称不能为空')
		return
	}
	const index = entries.value.findIndex(e => e.entryId === currentEntry.value.entryId)
	if (index >= 0) {
		entries.value[index] = { ...currentEntry.value }
		ElMessage.success('入库单已更新')
	} else {
		entries.value.push({ ...currentEntry.value })
		ElMessage.success('入库单已新增')
	}
	dialogVisible.value = false
}

// 删除入库单
const deleteEntry = (row) => {
	ElMessageBox.confirm('确认删除该入库单吗？', '提示', { type: 'warning' })
		.then(() => {
			entries.value = entries.value.filter(e => e.entryId !== row.entryId)
			ElMessage.success('入库单已删除')
		})
		.catch(() => { })
}
</script>

<style scoped>
.product-in .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
